{% extends 'html/all.html' %}
{% block title %}
    我的购物车
{% endblock %}
{% block content %}
{% endblock %}
{% block scripts %}
    <div class="container my-4">
        <div class="row row-cols-1 row-cols-md-3 g-4" id="productRow">
        </div>
    </div>
    <script>
        $.ajax({
            url: '/api/my_cart',
            type: 'GET',
            success: function (response) {
                if (response.status === 'success') {
                    var product_ids = response.data;
                    product_ids.forEach(function (product_id_array) {
                        var product_id = product_id_array[0];  // 提取商品ID
                        $.ajax({
                            url: '/api/get_shop_id1',
                            type: 'GET',
                            data: {
                                id: product_id  // 使用提取的商品ID
                            },
                            success: function (response) {
                                if (response.status === 'success') {
                                    var product = response.data;
                                    var soldText = product[6] == 1 ? '<span class="badge bg-danger">已售</span>' : '';
                                    var detailsButton = `<a href="/details?id=${product_id}" class="btn btn-primary">查看详情</a>`;
                                    // 更新页面的内容，显示商品信息
                                    $('#productRow').append(
                                        `<div class="col">
                                        <div class="card">
                                            <img alt="产品图片" class="card-img-top" src="${product[1]}"/>
                                            <div class="card-body">
                                                <h5 class="card-title">${product[0]} ${soldText}</h5>
                                                <p class="card-text">价格：${product[2]}￥</p>
                                                <p class="card-text">卖家：${product[4]}</p>
                                                <p class="card-text">卖家信用分：${product[5]}</p>
                                                <p class="card-text">商品介绍：${product[3]}</p>
                                                ${detailsButton}
                                            </div>
                                        </div>
                                    </div>`
                                    );
                                } else {
                                    console.error('加载商品失败:', response.message);
                                }
                            },
                            error: function (xhr, status, error) {
                                console.error('AJAX 请求失败:', error);
                            }
                        });
                    });
                } else {
                    console.error('加载收藏失败:', response.message);
                }
            },
            error: function (xhr, status, error) {
                console.error('AJAX 请求失败:', error);
            }
        });
    </script>
{% endblock %}